<template>
  <div>
    <div class="indBox">
      <!--用电数据，能耗占比-->
      <div class="box abxo2">
        <div class="flexOne">
          <el-card>
            <div class="echOne">用电数据</div>
            <div class="echCom">
              <p>
                能耗：
                <el-select v-model="value" style="width: 110px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </p>
              <div class="ms">
                <p>
                  过去365天（去年）<span class="pFont"></span
                  ><span class="ps">()</span>
                </p>
                <p>
                  过去30天（去年同月）<span class="pFont"></span>
                  <span class="ps">()</span>
                </p>
                <!-- zhComputed为vue3计算属性，用来做单位转换 -->

                <p>
                  当日（昨日）<span class="pFont">{{
                    zhComputed(ydmsg.data.p0)
                  }}</span
                  ><span class="ps">({{ zhComputed(ydmsg.data.p1) }})</span>
                </p>
              </div>

              <div class="gl">
                <div class="end">
                  <p>
                    实时 <span class="pFont">{{ ydmsg.data.ps }} kW</span>
                  </p>
                  <p>
                    历史最高
                    <span class="pFont">{{ ydmsg.data.all_max }} kW</span>
                    <span class="ps"
                      >(时间：<span class="pt">{{
                        ydmsg.data.all_max_time
                      }}</span
                      >)</span
                    >
                  </p>
                  <p>
                    本年最高
                    <span class="pFont">{{ ydmsg.data.year_max }} kW</span
                    ><span class="ps"
                      >(时间：<span class="pt">{{
                        ydmsg.data.year_max_time
                      }}</span
                      >)</span
                    >
                  </p>
                </div>
              </div>
            </div>
            <div class="tt">
              <el-select
                v-model="select"
                placeholder="Select"
                style="width: 115px"
              >
                <el-option label="总体" value="总体" />
              </el-select>

              <el-select
                v-model="value1"
                placeholder="请选择"
                style="width: 115px"
                @change="ydunit"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :disabled-date="disabledDate"
                style="margin: 0 20px"
                @change="handleElector"
              />
            </div>
            <div id="main" style="height: 390px"></div>
          </el-card>
        </div>
        <div class="flexTwo">
          <el-card style="height: 100%">
            <div class="echOne">能耗占比</div>
            <div class="two">
              <div id="two" style="height: 250px"></div>
              <div class="input_t">
                <el-date-picker
                  v-model="time1"
                  type="daterange"
                  :disabled-date="disabledDate"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="NhhandleElector"
                  style="width: 250px; margin: 0 20px"
                />
              </div>
            </div>
            <div style="display: flex">
              <div class="threeBox">
                <div id="three" style="height: 310px"></div>
                <div class="qn">去年</div>
                <div class="sy">上月</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!--碳排放，用能强度-->
      <div class="box abxo2">
        <div class="flexOne">
          <el-card>
            <div class="echOne">碳排放</div>
            <div class="tpf">
              <div class="tpf1">
                <div class="tf1">
                  <div>
                    <div>碳中和成本</div>
                    <div>
                      <span>{{ tanData.zhcb.toLocaleString() }}</span
                      >RMB/年
                    </div>
                  </div>
                  <div>
                    <div>购买绿电成本</div>
                    <div>
                      <span>{{ tanData.ldcb.toLocaleString() }}</span
                      >RMB/年
                    </div>
                  </div>
                </div>
              </div>
              <div class="tpf2">
                <div id="four" style="height: 250px"></div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="flexTwo">
          <el-card style="height: 309px">
            <div
              class="echOne"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              用能强度
              <el-select
                v-model="select1"
                style="width: 115px"
                @change="getQiangDu(select1)"
              >
                <el-option label="kWh/m²" value="kWh/m²" />
                <el-option label="RMB/m²" value="RMB/m²" />
                <el-option label="kgce/m²" value="kgce/m²" />
              </el-select>
            </div>
            <div>
              <div id="five" style="height: 240px"></div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!--用电平衡-->
    <div class="box_two">
      <el-card>
        <div class="echOne">用电平衡</div>
        <div class="zz">
          <div class="tpf1" style="margin-left: 30px">
            <div class="tf1">
              <div>
                <div>区域总电耗（过去一年累计）</div>
                <div><span></span>kWh</div>
              </div>

              <div>
                <div>区域分项电耗加总（过去一年累计）</div>

                <div><span></span>kWh</div>
              </div>
            </div>
          </div>
          <div class="b">
            <div class="c">
              <el-date-picker
                v-model="time3"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :disabled-date="disabledDate"
                style="margin: 0 20px"
                @change="handleElector1"
              />
            </div>
            <div id="six" style="height: 250px"></div>
          </div>
        </div>
      </el-card>
    </div>
    <!--燃气数据-->
    <div class="box_two">
      <el-card>
        <div class="echOne">燃气数据</div>
        <div class="zz">
          <div class="asss">
            <div class="end_font">
              <div>
                <div></div>
                <div>
                  燃气：
                  <el-select
                    v-model="select2"
                    placeholder="请选择"
                    style="width: 115px"
                    size="small"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>

              <div>
                <div>过去365天（去年）</div>
                <div>
                  <span class="spanOne m"></span>
                  <span class="spanTwo">（）</span>
                </div>
              </div>

              <div>
                <div>过去30天（去年同月）</div>

                <div>
                  <span class="spanOne n"></span>
                  <span class="spanTwo">（）</span>
                </div>
              </div>

              <div>
                <div>当日（昨日）</div>
                <div>
                  <span class="spanOne v"></span>
                  <span class="spanTwo">（）</span>
                </div>
              </div>
            </div>
          </div>
          <div class="b">
            <div class="c">
              <el-select
                v-model="end_value"
                placeholder="Select"
                style="width: 115px"
              >
                <el-option label="总体" value="总体" />
              </el-select>

              <el-select
                v-model="end_select"
                placeholder="Select"
                style="width: 115px"
              >
              </el-select>

              <el-date-picker
                v-model="time2"
                type="daterange"
                range-separator="至"
                :disabled-date="disabledDate"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="margin: 0 20px"
              />
            </div>
            <div id="seven" style="height: 250px; margin-left: 30px"></div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, reactive, computed } from "vue";
import { ProjectGroupone, getlzmsg } from "@/api/model/echarts";
import { inuserput } from "@/api/model/login";
import * as echarts from "echarts";
import { AdminInputs } from "@/api/model/admins";
import dayjs from "dayjs";
const ydmsg = reactive({ data: {} });
const value = ref("kWh");
const value1 = ref("kWh");
const select = ref("总体");
const time = ref("");
const time3 = ref("");
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};

const time1 = ref("");
const time2 = ref("");
const select1 = ref("kWh/m²");
const select2 = ref("m³");
const end_value = ref("总体");
const end_select = ref("m³");
const Allxishu = reactive({
  yd: 1,
});
const AllTimes = reactive({
  ydtime: {
    0: dayjs()
      // .add(-1, "week")
      // .startOf("week")
      // .add(1, "day")
      .subtract(7, "day")
      .format("YYYY-MM-DD HH:mm:ss"),
    1: dayjs()
      // .add(-1, "week")
      // .endOf("week")
      // .add(1, "day")
      .format("YYYY-MM-DD HH:mm:ss"),
  },
  phtime: {
    0: dayjs().subtract(7, "day").format("YYYY-MM-DD HH:mm:ss"),
    // .add(-1, "week")
    // .startOf("week")
    // .add(1, "day")
    // .format("YYYY-MM-DD HH:mm:ss"),
    1: dayjs()
      // .add(-1, "week")
      // .endOf("week")
      // .add(1, "day")
      .format("YYYY-MM-DD HH:mm:ss"),
  },
  nhtime: {
    0: dayjs()
      // .add(-1, "week")
      // .startOf("week")
      // .add(1, "day")
      .subtract(7, "day")
      .format("YYYY-MM-DD HH:mm:ss"),
    1: dayjs()
      // .add(-1, "week")
      // .endOf("week")
      // .add(1, "day")
      .format("YYYY-MM-DD HH:mm:ss"),
  },
  rqtime: {
    0: dayjs()
      // .add(-1, "week")
      // .startOf("week")
      // .add(1, "day")
      .subtract(7, "day")
      .format("YYYY-MM-DD HH:mm:ss"),
    1: dayjs()
      // .add(-1, "week")
      // .endOf("week")
      // .add(1, "day")
      .format("YYYY-MM-DD HH:mm:ss"),
  },
});
const options = [
  {
    value: "kWh",
    label: "kWh",
  },
  {
    value: "RMB",
    label: "RMB",
  },
  {
    value: "kgce",
    label: "kgce",
  },
  {
    value: "kgco2",
    label: "kgco2",
  },
];

onMounted(() => {
  getyd(); //实时信息

  getYongdian(); //用电

  getNengHao(); //能耗

  getPingHeng(); //平衡

  getRanQi(); //燃气

  getTanPai(); //碳排放

  getQiangDu(); // 用能强度
});

// 用电数据表
const getYongdian = async () => {
  let obj = {
    dataType: "day",
    dayFrom: AllTimes.ydtime[0],
    dayTo: AllTimes.ydtime[1],
    firstType: "关键指标",
    indicatorName: "用电数据",
    thirdType: "kwh",
    projectId: 1,
    type: "day",
  };

  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let { data: res } = await ProjectGroupone(obj);
  console.log("用电数据", obj, res);

  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      // if (item.type == "type1") {
      electrox2.push(item.number1 * Allxishu.yd);
      // } else if (item.type == "type2") {
      //   electrox2.push(item.number1);
      // }
      data.push(`${item.day.substring(5, 7)}/${item.day.substring(8, 10)}`);
    });
    let data1 = [...new Set(data)];
    let myChart = echarts.init(document.getElementById("main"));
    myChart.setOption({
      xAxis: {
        name: "日",
        data: data1,
      },
      yAxis: {
        name: "能耗",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          data: electrox1,
          type: "line",
          areaStyle: {
            color: "#f6f7f7",
          },
          color: "#dddddd",
        },
        {
          data: electrox2,
          type: "line",
          areaStyle: {
            color: "#fdf5ce",
            opacity: 0.5,
          },
          color: "#ffc40f",
        },
      ],
    });
  }
};

const getYongdian1 = async () => {
  let obj = {
    dataType: "day",
    dayFrom: AllTimes.phtime[0],
    dayTo: AllTimes.phtime[1],
    firstType: "关键指标",
    indicatorName: "用电平衡",
    thirdType: "",
    projectId: 1,
    type: "day",
  };

  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let { data: res } = await ProjectGroupone(obj);
  console.log("用电平衡", obj, res);

  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      // if (item.type == "type1") {
      electrox2.push(item.number1 * Allxishu.yd);
      // } else if (item.type == "type2") {
      //   electrox2.push(item.number1);
      // }
      data.push(`${item.day.substring(5, 7)}/${item.day.substring(8, 10)}`);
    });
    let data1 = [...new Set(data)];
    let myChart = echarts.init(document.getElementById("six"));
    myChart.setOption({
      xAxis: {
        name: "日",
        data: data1,
      },
      yAxis: {
        name: "kwh",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          data: electrox1,
          type: "line",
          areaStyle: {
            color: "#f6f7f7",
          },
          color: "#dddddd",
        },
        {
          data: electrox2,
          type: "line",
          areaStyle: {
            color: "#fdf5ce",
            opacity: 0.5,
          },
          color: "#ffc40f",
        },
      ],
    });
  }
};
// 获取用电信息
const getyd = async () => {
  let { data } = await getlzmsg();
  ydmsg.data = data;
  console.log(data, "用电信息");
};
// 能耗占比
const getNengHao = async () => {
  let obj = {
    dataType: "day",
    dayFrom: AllTimes.nhtime[0],
    dayTo: AllTimes.nhtime[1],
    firstType: "关键指标",
    indicatorName: "能耗占比",
    projectId: 1,
    thirdType: "",
  };

  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let electrox3 = []; // 第二条线
  let electrox4 = []; // 第二条线
  let electrox5 = []; // 第二条线

  let { data: res } = await ProjectGroupone(obj);
  console.log(res, "能耗？");

  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      if (item.type == "type1") {
        electrox1.push(item.number1);
      } else if (item.type == "type2") {
        electrox2.push(item.number1);
      } else if (item.type == "type3") {
        electrox3.push(item.number1);
      } else if (item.type == "type4") {
        electrox4.push(item.number1);
      } else if (item.type == "type5") {
        electrox5.push(item.number1);
      }
      data.push(`${item.day.substring(5, 7)}/${item.day.substring(8, 10)}`);
    });
    let data1 = [...new Set(data)];
    let chartDom = echarts.init(document.getElementById("two"));
    let chartDom3 = echarts.init(document.getElementById("three"));
    chartDom.setOption({
      legend: {
        data: ["冷机", "冷冻泵", "冷却泵", "冷却塔", "热水泵"],
        left: 200,
        top: 15,
        itemWidth: 15,
        itemHeight: 1,
      },
      xAxis: {
        name: "日",
        // boundaryGap: true,
        data: data1,
      },
      yAxis: {
        name: "kWh",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
        axisLabel: {
          show: true,
          interval: "auto",
          formatter: "{value}",
        },
      },
      tooltip: {
        trigger: "axis",
        formatter(params) {
          var totVal = 0;
          var relVal = params[0].name;
          for (var j = 0; j < params.length; j++) {
            totVal += Number(params[j].value);
          }
          for (var i = 0, l = params.length; i < l; i++) {
            if (params[i].seriesName.indexOf("次数") == -1) {
              relVal +=
                "<br/>" +
                params[i].marker +
                params[i].seriesName +
                " : " +
                ((Number(params[i].value) / totVal) * 100).toFixed(1) +
                " %";
            } else {
              relVal +=
                "<br/>" +
                params[i].marker +
                params[i].seriesName +
                " : " +
                Number(params[i].value);
            }
          }
          relVal += "<br />总计 : " + totVal + " kWh";
          return relVal;
        },
      },
      series: [
        {
          name: "冷机",
          type: "line",
          stack: "Total",
          data: electrox1,
          color: "rgba(217, 9, 9,0.3)",
          areaStyle: {
            opacity: 0.2,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(217, 9, 9)",
              },
              {
                offset: 1,
                color: "rgb(217, 9, 9)",
              },
            ]),
          },
        },
        {
          name: "冷冻泵",
          type: "line",
          stack: "Total",
          data: electrox2,
          color: "rgba(255, 196, 15,0.3)",
          areaStyle: {
            opacity: 0.2,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(255, 196, 15)",
              },
              {
                offset: 1,
                color: "rgb(255, 196, 15)",
              },
            ]),
          },
        },
        {
          name: "冷却泵",
          type: "line",
          stack: "Total",
          data: electrox3,
          color: "rgba(226, 227, 227,0.2)",
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(226, 227, 227)",
              },
              {
                offset: 1,
                color: "rgb(226, 227, 227)",
              },
            ]),
          },
        },
        {
          name: "冷却塔",
          type: "line",
          stack: "Total",
          data: electrox4,
          color: "#A7DDFF",
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(167, 221, 255)",
              },
              {
                offset: 1,
                color: "rgb(167, 221, 255)",
              },
            ]),
          },
        },
        {
          name: "热水泵",
          type: "line",
          stack: "Total",
          data: electrox5,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(84, 112, 198)",
              },
              {
                offset: 1,
                color: "rgb(84, 112, 198)",
              },
            ]),
          },
        },
      ],
    });

    chartDom3.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{b}:{c}个" /*({d}%)饼状图触碰之后显示的注释文字*/,
      },
      legend: {
        bottom: "0",
      },
      series: [
        {
          type: "pie",
          center: ["25%", "50%"],
          radius: [40, 75],
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show:false,
            fontSize: "15",
            color: "inherit",
            formatter: `{b} {d}%` /*{d}%饼状图触碰之后显示的注释文字*/,
          },
          data: [
          { value: null, name: "冷机" },
            { value: null, name: "冷冻泵" },
            { value: null, name: "冷却塔" },
            { value: null, name: "冷却泵" },
            { value: null, name: "热水泵" },
          
          ],
          color: ["#0BA8EE", "#05C1F1", "#15B6CB", "#5E9FC2", "#A7DDFF"],
        },
        {
          type: "pie",
          radius: [45, 75],
          center: ["75%", "50%"],
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            fontSize: "15",
            color: "inherit",
            formatter: `{b} {d}%` /*{d}%饼状图触碰之后显示的注释文字*/,
          },
          data: [

          
            { value: electrox1.length, name: "冷机" },
            { value: electrox2.length, name: "冷冻泵" },
            { value: electrox3.length, name: "冷却塔" },
            { value: electrox4.length, name: "冷却泵" },
            { value: electrox5.length, name: "热水泵" },
        ],
            
          color: ["#0BA8EE", "#05C1F1", "#15B6CB", "#5E9FC2", "#A7DDFF"],
        },
      ],
    });
  }
};

// 用电平衡
const getPingHeng = async () => {
  let obj = {
    dataType: "day",
    dayFrom: AllTimes.phtime[0],
    dayTo: AllTimes.phtime[1],
    firstType: "关键指标",
    indicatorName: "用电平衡",
    projectId: 1,
    thirdType: "",
  };

  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let { data: res } = await ProjectGroupone(obj);
  console.log(res, 833);
  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      if (item.type == "type1") {
        electrox1.push(item.number1);
      } else if (item.type == "type2") {
        electrox2.push(item.number1);
      }
      data.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`);
    });
    let data1 = [...new Set(data)];
    let chartDom6 = echarts.init(document.getElementById("six"));
    chartDom6.setOption({
      xAxis: {
        name: "日",
        data: data1,
      },
      yAxis: {
        name: "kWh",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
      grid: {
        left: "3%",
        right: "5%",
        bottom: "10%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          data: electrox1,
          type: "line",
          areaStyle: {
            color: "#f6f7f7",
          },
          color: "#dddddd",
        },
        {
          data: electrox2,
          type: "line",
          areaStyle: {
            color: "#fdf5ce",
            opacity: 0.5,
          },
          color: "#ffc40f",
        },
      ],
    });
  }
};

// 燃气数据
const getRanQi = async () => {
  let obj = {
    dataType: "day",
    dayFrom: AllTimes.rqtime[0],
    dayTo: AllTimes.rqtime[1],
    firstType: "关键指标",
    indicatorName: "燃气数据",
    thirdType: "",
    projectId: 1,
  };

  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let { data: res } = await ProjectGroupone(obj);
  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      if (item.type == "type1") {
        electrox1.push(item.number1);
      } else if (item.type == "type2") {
        electrox2.push(item.number1);
      }
      data.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`);
    });
    let data1 = [...new Set(data)];

    let chartDom7 = echarts.init(document.getElementById("seven"));
    chartDom7.setOption({
      xAxis: {
        name: "日",
        data: data1,
      },
      yAxis: {
        name: "能耗",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
      grid: {
        left: "3%",
        right: "5%",
        bottom: "10%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        // {
        //   data: electrox1,
        //   type: "line",
        //   areaStyle: {
        //     color: "#f6f7f7",
        //   },
        //   color: "#dddddd",
        // },
        // {
        //   data: electrox2,
        //   type: "line",
        //   areaStyle: {
        //     color: "#fdf5ce",
        //     opacity: 0.5,
        //   },
        //   color: "#ffc40f",
        // },
      ],
    });
  }
};

// 单位转换
const dwzh = reactive({
  // kgce
  kgce: 0,
  // RMB
  rmb: 0.79,
  // kgco2
  kgco: 0,
});

// 用电数据单位转换计算属性
const zhComputed = computed(() => (dvalue) => {
  return value.value === "RMB"
    ? (dvalue * dwzh.rmb).toFixed(2)
    : value.value === "kgce"
    ? (dvalue * dwzh.kgce).toFixed(2)
    : value.value === "kgco2"
    ? (dvalue * dwzh.kgco).toFixed(2)
    : dvalue;
});

// 碳排放碳中和成喷和购买绿成本
const tanData = reactive({
  zhcb: 0,
  ldcb: 0,
});

// 碳排放
const getTanPai = async () => {
  let obj = {
    dataType: "year",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "关键指标",
    indicatorName: "碳排放",
    thirdType: "",
    projectId: 1,
  };

  let data = []; //日期
  let { data: res } = await ProjectGroupone(obj);
  let { data: mj } = await inuserput();
  let jz = mj.data.list[0];
  console.log("建筑面积", jz);
  // let { data: userInput } = await AdminInputs();
  let { data: userInputdata } = await AdminInputs();
  let userInput = userInputdata.data.list[0];
  console.log("userInput", userInput);
  // kgce单位交互输入
  dwzh.kgce = JSON.parse(userInput.unit).electric_tce;
  // kgco单位交互输入
  dwzh.kgco = JSON.parse(userInput.unit).electric_kgco;

  // 柱状图数据
  let barAjaxData = JSON.parse(userInput.energy);
  // 碳转换基数
  let kgcozh = JSON.parse(userInput.unit).electric_kgco;
  // 单价
  let ccer = JSON.parse(userInput.related).ccer;
  // 类似建筑
  let ls = JSON.parse(userInput.related).build;
  // 本地强制
  let bdqz = JSON.parse(userInput.related).rational;
  // 建筑面积
  let jzmj = JSON.parse(jz.info).area.split(",").join("");
  jzmj = parseInt(jzmj);
  // console.log( typeof jzmj,'建筑面积--------');
  // 绿电价格
  let ldjg = JSON.parse(userInput.related).electricity;

  // 碳中和成本
  // tanData.zhcb = ldjg * barAjaxData.LastssYear.electric;
  tanData.zhcb = (
    (barAjaxData.LastssYear.electric * kgcozh * ccer) /
    1000
  ).toFixed(1);
  tanData.ldcb = (ldjg * barAjaxData.LastssYear.electric).toFixed(1);

  // 能耗柱状图数据
  let bardata = [
    ((barAjaxData.LastYear.electric * kgcozh * ccer) / 1000).toFixed(2),
    ((barAjaxData.LastsYear.electric * kgcozh * ccer) / 1000).toFixed(2),
    ((barAjaxData.LastssYear.electric * kgcozh * ccer) / 1000).toFixed(2),
  ];
  let electrox1 = [
    // 第一条线
    ((ls * jzmj * kgcozh * ccer) / 1000).toFixed(2),
    ((ls * jzmj * kgcozh * ccer) / 1000).toFixed(2),
    ((ls * jzmj * kgcozh * ccer) / 1000).toFixed(2),
  ];
  let electrox2 = [
    // 第二条线
    ((bdqz * jzmj * kgcozh * ccer) / 1000).toFixed(2),
    ((bdqz * jzmj * kgcozh * ccer) / 1000).toFixed(2),
    ((bdqz * jzmj * kgcozh * ccer) / 1000).toFixed(2),
  ];
  // console.log(ls, jzmj, kgcozh, ccer,'------------------------------------------------------------------------');
  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      // console.log(`${item.day.substring(0, 4)}`)
      data.push(`${item.day.substring(0, 4)}`);
      // if (item.type == "type1") {
      // electrox1.push(item.number1);
      // } else if (item.type == "type2") {
      // electrox2.push(item.number1);
      // }
    });
    let data1 = [...new Set(data)];
    let chartDom4 = echarts.init(document.getElementById("four"));
    chartDom4.setOption({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        left: "3%",
        right: "7%",
        bottom: "3%",
        containLabel: true,
      },
      legend: {
        top: 20,
        right: 40,
        itemHeight: 1,
        itemWidth: 15,
      },
      xAxis: [
        {
          type: "category",
          name: "年",
          data: data1,
        },
      ],
      yAxis:
        // [
        {
          name: "K RMB",
          type: "value",
          axisLine: {
            // x轴线隐藏，但不隐藏背景线
            show: true,
          },
        },
      // {
      //   type: "value",
      //   show:false,
      //   axisLine: {
      //     show: false,
      //   },
      // }
      // ],
      series: [
        {
          type: "bar",
          name: "能耗",
          // yAxisIndex:0,
          barGap: 0,
          axisLine: { onZero: true },
          // data: [
          //   electrox1[0] / electrox2[0],
          //   electrox1[1] / electrox2[1],
          //   electrox1[2] / electrox2[2],
          // ],
          data: bardata,
          color: "#d6ebfa",
        },
        {
          type: "line",
          name: "可比建筑",
          // yAxisIndex:1,
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "#D90909",
          },
          data: electrox1,
        },
        {
          type: "line",
          name: "本地标准",
          // yAxisIndex:1,
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "#FFC40F",
          },
          data: electrox2,
        },
      ],
    });
  }
};

// const putchart = () => {
//   console.log(select1.value);
//   getQiangDu();
// };

// 用能强度
const getQiangDu = async (key = "kWh/m²") => {
  // 建筑面积
  let { data } = await inuserput();
  let userput = data.data.list[0];
  console.log("建筑面积userput", userput);
  // let area = JSON.parse(userput.data.info).area;
  let area = JSON.parse(userput.info).area.split(",").join("");
  // let area = JSON.parse(userput.data.info).area.split(',').join('');
  area = parseInt(area);
  console.log(area, "jzmj");
  // 实际能耗
  let { data: nhdata } = await AdminInputs();
  let nh = nhdata.data.list[0];
  // tce
  let tceD = JSON.parse(nh.unit).electric_tce;

  let dian = JSON.parse(nh.energy);
  let barlist1 = [
    (dian.LastYear.electric / area).toFixed(1),
    (dian.LastsYear.electric / area).toFixed(1),
    (dian.LastssYear.electric / area).toFixed(1),
  ];

  // 能耗预算
  //   let nenghao = 0
  //   for (const key in dian.table1[0]) {
  //     if(key !== 'name' &&  dian.table1[0][key] !== null){
  //       nenghao = nenghao + parseInt(dian.table1[0][key])
  //     }
  //   }

  //   let barlist2 = [
  //     (nenghao / area).toFixed(1),
  //     ( nenghao / area).toFixed(1),
  //     (nenghao / area).toFixed(1)
  // ]

  // 类似建筑
  let lsList = JSON.parse(nh.related);
  console.log(lsList, "能耗预算");
  let barlist3 = [lsList.build, lsList.build, lsList.build];

  // 本地强制
  let line4 = [lsList.rational, lsList.rational, lsList.rational];

  // 本地先进
  let line5 = [lsList.advanced, lsList.advanced, lsList.advanced];

  let chartDom5 = echarts.init(document.getElementById("five"));
  chartDom5.setOption({
    grid: {
      show: false,
      left: "7%",
      right: "20%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      // data: ["实际能耗", "能耗预算", "类似建筑", "本地强制", "本地先进"],
      data: ["实际能耗", "类似建筑", "本地强制", "本地先进"],
      width: 50,
      right: 20,
      top: "25%",
    },
    xAxis: { type: "category", name: "年", data: [2019, 2020, 2021] },
    // yAxis: [
    //   {
    //     type: "value",
    //     name: key,
    //     // min: 0,
    //     // max: 1,
    //     axisLine: {
    //       show: true,
    //     },
    //   },
    //   {
    //     type: "value",
    //     show:false,
    //     axisLine: {
    //       show: false,
    //     },
    //   }
    // ],
    yAxis: {
      type: "value",
      name: key,
      // min: 0,
      // max: 1,
      axisLine: {
        show: true,
      },
    },

    series: [
      {
        name: "实际能耗",
        // yAxisIndex:0,
        type: "bar",
        data:
          key === "RMB/m²"
            ? barlist1.map((item) => (item * 0.78).toFixed(1))
            : key === "kgce/m²"
            ? barlist1.map((item) => (item * tceD).toFixed(1))
            : barlist1,
        barWidth: 60,
        color: "#F79646",
      },
      // {
      //   name: "能耗预算",
      //   type: "bar",
      //   data: key === 'RMB/m²' ?
      //   barlist2.map(item=>(item*0.78).toFixed(1)) :
      //   (key === 'tce/m²' ? barlist2.map(item=>(item*tceD).toFixed(1)) : barlist2),
      //   // yAxisIndex: 0,
      //   barWidth: 50,
      //   color: "#D6EBFA",
      // },
      {
        name: "类似建筑",
        type: "bar",
        // yAxisIndex:1,
        data:
          key === "RMB/m²"
            ? barlist3.map((item) => (item * 0.78).toFixed(1))
            : key === "kgce/m²"
            ? barlist3.map((item) => (item * tceD).toFixed(1))
            : barlist3,
        color: "#0070C0",
        barWidth: 60,
      },
      {
        name: "本地强制",
        // yAxisIndex:1,
        type: "line",
        data:
          key === "RMB/m²"
            ? line4.map((item) => (item * 0.78).toFixed(1))
            : key === "kgce/m²"
            ? line4.map((item) => (item * tceD).toFixed(1))
            : line4,
        lineStyle: {
          color: "#FFC40F",
          width: 2,
        },
      },
      {
        name: "本地先进",
        // yAxisIndex:1,
        type: "line",
        data:
          key === "RMB/m²"
            ? line5.map((item) => (item * 0.78).toFixed(1))
            : key === "kgce/m²"
            ? line5.map((item) => (item * tceD).toFixed(1))
            : line5,
        lineStyle: {
          color: "#64CC93",
          width: 2,
        },
      },
    ],
  });
};

//监听下拉框数据变化
watch(
  value,
  (newValue, oldValue) => {
    console.log(
      "求和的值变了",
      "变化后的值是" + newValue,
      "变化前的值是" + oldValue
    );
  },
  { immediate: true }
);
// 用电数据时间
const handleElector = (e) => {
  AllTimes.ydtime[0] = dayjs(e[0]).format("YYYY-MM-DD HH:mm:ss");
  AllTimes.ydtime[1] = dayjs(e[1]).format("YYYY-MM-DD HH:mm:ss");
  getYongdian();
};
// 用电平衡时间
const handleElector1 = (e) => {
  AllTimes.phtime[0] = dayjs(e[0]).format("YYYY-MM-DD HH:mm:ss");
  AllTimes.phtime[1] = dayjs(e[1]).format("YYYY-MM-DD HH:mm:ss");
  getYongdian1();
};
const ydunit = (e) => {
  if (e == "kWh") {
    Allxishu.yd = 1;
  } else if (e == "RMB") {
    Allxishu.yd = dwzh.rmb;
  } else if (e == "kgco2") {
    Allxishu.yd = dwzh.kgco;
  } else if (e == "kgce") {
    Allxishu.yd = dwzh.kgce;
  }
  getYongdian();
};
// 能耗占比时间
const NhhandleElector = (e) => {
  AllTimes.nhtime[0] = dayjs(e[0]).format("YYYY-MM-DD HH:mm:ss");
  AllTimes.nhtime[1] = dayjs(e[1]).format("YYYY-MM-DD HH:mm:ss");
  getNengHao();
};
</script>

<style lang="scss" scoped>
.indBox {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  row-gap: 5px;

  .abxo2 {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
  }
}

:deep(.el-card__body) {
  padding: 0;
}

.box {
  display: flex;

  .flexOne {
    flex: 1;

    .echOne {
      padding: 15px 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 3px solid #f3f5f9;
    }

    .echCom {
      padding: 0 20px;
      margin: 10px 0;

      p {
        margin: 10px 0;
        font-size: 15px;
        color: #90979e;

        .pFont {
          font-size: 24px;
          color: #7695d1;
          margin: 0 10px;
        }

        .ps {
          font-size: 10px;
        }
      }

      .ms {
        display: flex;
        justify-content: space-between;
      }

      .gl {
        margin-top: 5px;

        .end {
          display: flex;
          justify-content: space-between;

          .pt {
            color: #7695d1;
          }
        }
      }
    }

    .tt {
      display: flex;
      justify-content: right;
      align-items: center;

      .el-select {
        margin: 0 10px;
      }
    }
  }

  .flexTwo {
    flex: 1;

    .echOne {
      padding: 15px 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 3px solid #f3f5f9;
    }

    .two {
      text-align: right;
      margin-top: 10px;
      position: relative;

      .input_t {
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }

    .threeBox {
      flex: 1;
      position: relative;

      .qn {
        position: absolute;
        top: 3%;
        left: 5%;
        color: #b1c2d1;
        font-size: 15px;
      }

      .sy {
        position: absolute;
        top: 3%;
        left: 55%;
        color: #b1c2d1;
        font-size: 15px;
      }
    }
  }
}

.tpf1 {
  flex: 1;
  margin-left: 10px;

  .tf1 {
    font-size: 14px;
    color: #87928f;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    align-items: flex-end;
    padding-bottom: 10px;
    color: #7e7e7e;

    & > div {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;

      & > div:first-child {
        color: #101010;
      }

      & > div:last-child {
        font-size: 12px;
      }

      span {
        color: #277bcb;
        font-size: 18px;
      }
    }
  }
}

.tpf {
  display: flex;

  .tpf2 {
    flex: 2;
  }
}

.box_two {
  margin-top: 6px;

  .echOne {
    padding: 15px 20px;
    font-size: 20px;
    color: #6d83b7;
    font-weight: 600;
    border-bottom: 3px solid #f3f5f9;
  }

  .zz {
    display: flex;

    .a {
      font-size: 15px;
    }

    .b {
      flex: 2;

      .c {
        text-align: right;
        margin-top: 10px;

        .el-select {
          margin: 0 10px;
        }
      }
    }
  }
}

.asss {
  width: 33%;
  padding: 0 50px 30px;
}

.end_font {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 14px;
  color: #7e7e7e;

  div:first-child {
    justify-content: flex-end !important;
  }

  & > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;

    div:first-child {
      flex: 1;
    }

    div:last-child {
      flex: 0.9;
    }

    .spanOne {
      color: #277bcb;
      font-size: 18px;
    }
  }
}
</style>
